<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div跟随鼠标移动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            position: absolute;
        }
    </style>
    <script>
        window.onload=function () {
            //使div跟随鼠标移动
            var box1=document.getElementById("box1");
                document.onmousemove=function (event) {
                    event=event||window.event;
                    //获取滚动条的距离
                    // var st=document.body.scrollTop;
                    var st=document.body.scrollTop||document.documentElement.scrollTop;
                    var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
                    // console.log(st);
                    /*结论: chrome认为浏览器是body可以通过body.scrollTop来获取
                   *        火狐滚动条是html document.documentElement.scrollTop
                   */
                    //设置x和y的坐标
                    var x=event.pageX;
                    var y=event.pageY;
                    //将div的水平偏移量等于x，垂直偏移量等于y
                    box1.style.left=x+sl+"px";
                    box1.style.top=y+st+"px";
                }
        }
    </script>
</head>
<body style="height: 1000px">
<script>
    /*pageX和pageY 可以获取鼠标相当于当前页面的坐标
     *   但是不能兼容IE8
    *
    * */
</script>
<div id="box1"></div>
</body>
</html>